<!DOCTYPE html>


<html theme="dark" showBanner="true" hasBanner="false" > 
<link href="https://cdn.staticfile.org/font-awesome/6.4.2/css/fontawesome.min.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/font-awesome/6.4.2/css/brands.min.css" rel="stylesheet">
<link href="https://cdn.staticfile.org/font-awesome/6.4.2/css/solid.min.css" rel="stylesheet">
<script src="/js/color.global.min.js" ></script>
<script src="/js/load-settings.js" ></script>
<head>
  <meta charset="utf-8">
  
  
  

  
  <title>vue eslint和prettier集成 | youlxb2008</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="preload" href="/css/fonts/Roboto-Regular.ttf" as="font" type="font/ttf" crossorigin="anonymous">
  <link rel="preload" href="/css/fonts/Roboto-Bold.ttf" as="font" type="font/ttf" crossorigin="anonymous">

  <meta name="description" content="介绍这几天公司前端项目需要做静态代码扫描，去做了一下研究。vue 端主要还是通过 eslint 来实现静态代码扫描，在 vscode 端用 prettier 来做代码保存自动格式化的一个过程。 eslint: 用于扫描代码，提示一些代码质量上存在的通用性问题。prettier：用于代码格式化，保证多 pc 端多软件之间的代码格式规范化工具。 项目集成 eslint参考地址为： https:&#x2F;&#x2F;es">
<meta property="og:type" content="article">
<meta property="og:title" content="vue eslint和prettier集成">
<meta property="og:url" content="https://youlxb2008.github.io/2023/09/14/front/eslintAndPrettier/index.html">
<meta property="og:site_name" content="youlxb2008">
<meta property="og:description" content="介绍这几天公司前端项目需要做静态代码扫描，去做了一下研究。vue 端主要还是通过 eslint 来实现静态代码扫描，在 vscode 端用 prettier 来做代码保存自动格式化的一个过程。 eslint: 用于扫描代码，提示一些代码质量上存在的通用性问题。prettier：用于代码格式化，保证多 pc 端多软件之间的代码格式规范化工具。 项目集成 eslint参考地址为： https:&#x2F;&#x2F;es">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://youlxb2008.github.io/images/front/eslint-plugin0925.png">
<meta property="og:image" content="https://youlxb2008.github.io/images/front/prettier-plugin0925.png">
<meta property="og:image" content="https://youlxb2008.github.io/images/front/vscode%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BF%9D%E5%AD%98%E9%85%8D%E7%BD%AE.png">
<meta property="article:published_time" content="2023-09-14T02:42:13.000Z">
<meta property="article:modified_time" content="2023-11-28T05:26:40.979Z">
<meta property="article:author" content="youlxb2008">
<meta property="article:tag" content="vue">
<meta property="article:tag" content="前端">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://youlxb2008.github.io/images/front/eslint-plugin0925.png">
  
    <link rel="alternate" href="/atom.xml" title="youlxb2008" type="application/atom+xml">
  
  
    <link rel="icon" media="(prefers-color-scheme: light)" href="/images/favicon-light-32.png" sizes="32x32">
    <link rel="icon" media="(prefers-color-scheme: light)" href="/images/favicon-light-128.png" sizes="128x128">
    <link rel="icon" media="(prefers-color-scheme: light)" href="/images/favicon-light-180.png" sizes="180x180">
    <link rel="icon" media="(prefers-color-scheme: light)" href="/images/favicon-light-192.png" sizes="192x192">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/images/favicon-dark-32.png" sizes="32x32">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/images/favicon-dark-128.png" sizes="128x128">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/images/favicon-dark-180.png" sizes="180x180">
    <link rel="icon" media="(prefers-color-scheme: dark)" href="/images/favicon-dark-192.png" sizes="192x192">
  
  
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 7.0.0-rc2"></head>

<body>
  
   
  <div id="main-grid" class="  ">
    <div id="nav" class=""  >
      <navbar id="navbar">
  <nav id="title-nav">
    <a href="/">
      <div id="vivia-logo">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
      </div>
      <div>youlxb2008 </div>
    </a>
  </nav>
  <nav id="main-nav">
    
      <a class="main-nav-link" href="/">首页</a>
    
      <a class="main-nav-link" href="/archives">文章</a>
    
      <a class="main-nav-link" href="/about">关于</a>
    
  </nav>
  <nav id="sub-nav">
    <a id="theme-btn" class="nav-icon">
      <span class="light-mode-icon"><svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M438.5-829.913v-48q0-17.452 11.963-29.476 11.964-12.024 29.326-12.024 17.363 0 29.537 12.024t12.174 29.476v48q0 17.452-11.963 29.476-11.964 12.024-29.326 12.024-17.363 0-29.537-12.024T438.5-829.913Zm0 747.826v-48q0-17.452 11.963-29.476 11.964-12.024 29.326-12.024 17.363 0 29.537 12.024t12.174 29.476v48q0 17.452-11.963 29.476-11.964 12.024-29.326 12.024-17.363 0-29.537-12.024T438.5-82.087ZM877.913-438.5h-48q-17.452 0-29.476-11.963-12.024-11.964-12.024-29.326 0-17.363 12.024-29.537t29.476-12.174h48q17.452 0 29.476 11.963 12.024 11.964 12.024 29.326 0 17.363-12.024 29.537T877.913-438.5Zm-747.826 0h-48q-17.452 0-29.476-11.963-12.024-11.964-12.024-29.326 0-17.363 12.024-29.537T82.087-521.5h48q17.452 0 29.476 11.963 12.024 11.964 12.024 29.326 0 17.363-12.024 29.537T130.087-438.5Zm660.174-290.87-34.239 32q-12.913 12.674-29.565 12.174-16.653-.5-29.327-13.174-12.674-12.673-12.554-28.826.12-16.152 12.794-28.826l33-35q12.913-12.674 30.454-12.674t30.163 12.847q12.709 12.846 12.328 30.826-.38 17.98-13.054 30.653ZM262.63-203.978l-32 34q-12.913 12.674-30.454 12.674t-30.163-12.847q-12.709-12.846-12.328-30.826.38-17.98 13.054-30.653l33.239-31q12.913-12.674 29.565-12.174 16.653.5 29.327 13.174 12.674 12.673 12.554 28.826-.12 16.152-12.794 28.826Zm466.74 33.239-32-33.239q-12.674-12.913-12.174-29.565.5-16.653 13.174-29.327 12.673-12.674 28.826-13.054 16.152-.38 28.826 12.294l35 33q12.674 12.913 12.674 30.454t-12.847 30.163q-12.846 12.709-30.826 12.328-17.98-.38-30.653-13.054ZM203.978-697.37l-34-33q-12.674-12.913-13.174-29.945-.5-17.033 12.174-29.707t31.326-13.293q18.653-.62 31.326 13.054l32 34.239q11.674 12.913 11.174 29.565-.5 16.653-13.174 29.327-12.673 12.674-28.826 12.554-16.152-.12-28.826-12.794ZM480-240q-100 0-170-70t-70-170q0-100 70-170t170-70q100 0 170 70t70 170q0 100-70 170t-170 70Zm-.247-82q65.703 0 111.475-46.272Q637-414.544 637-480.247t-45.525-111.228Q545.95-637 480.247-637t-111.475 45.525Q323-545.95 323-480.247t45.525 111.975Q414.05-322 479.753-322ZM481-481Z"/></svg></span>
      <span class="dark-mode-icon"><svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M480.239-116.413q-152.63 0-258.228-105.478Q116.413-327.37 116.413-480q0-130.935 77.739-227.435t206.304-125.043q43.022-9.631 63.87 10.869t3.478 62.805q-8.891 22.043-14.315 44.463-5.424 22.42-5.424 46.689 0 91.694 64.326 155.879 64.325 64.186 156.218 64.186 24.369 0 46.978-4.946 22.609-4.945 44.413-14.076 42.826-17.369 62.967 1.142 20.142 18.511 10.511 61.054Q807.174-280 712.63-198.206q-94.543 81.793-232.391 81.793Zm0-95q79.783 0 143.337-40.217 63.554-40.218 95.793-108.283-15.608 4.044-31.097 5.326-15.49 1.283-31.859.805-123.706-4.066-210.777-90.539-87.071-86.473-91.614-212.092-.24-16.369.923-31.978 1.164-15.609 5.446-30.978-67.826 32.478-108.282 96.152Q211.652-559.543 211.652-480q0 111.929 78.329 190.258 78.329 78.329 190.258 78.329ZM466.13-465.891Z"/></svg></span>
    </a>
    
      <a id="nav-rss-link" class="nav-icon mobile-hide" href="/atom.xml" title="RSS 订阅">
        <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M198-120q-25.846 0-44.23-18.384-18.384-18.385-18.384-44.23 0-25.846 18.384-44.23 18.384-18.385 44.23-18.385 25.846 0 44.23 18.385 18.384 18.384 18.384 44.23 0 25.845-18.384 44.23Q223.846-120 198-120Zm538.385 0q-18.846 0-32.923-13.769-14.076-13.769-15.922-33.23-8.692-100.616-51.077-188.654-42.385-88.039-109.885-155.539-67.5-67.501-155.539-109.885Q283-663.462 182.385-672.154q-19.461-1.846-33.23-16.23-13.769-14.385-13.769-33.846t14.076-32.922q14.077-13.461 32.923-12.23 120.076 8.692 226.038 58.768 105.961 50.077 185.73 129.846 79.769 79.769 129.846 185.731 50.077 105.961 58.769 226.038 1.231 18.846-12.538 32.922Q756.461-120 736.385-120Zm-252 0q-18.231 0-32.423-13.461t-18.653-33.538Q418.155-264.23 348.886-333.5q-69.27-69.27-166.501-84.423-20.077-4.462-33.538-18.961-13.461-14.5-13.461-33.346 0-19.076 13.884-33.23 13.884-14.153 33.115-10.922 136.769 15.384 234.384 112.999 97.615 97.615 112.999 234.384 3.231 19.23-10.538 33.115Q505.461-120 484.385-120Z"/></svg>
      </a>
    
    <div id="nav-menu-btn" class="nav-icon">
      <svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M177.37-252.282q-17.453 0-29.477-11.964-12.024-11.963-12.024-29.326t12.024-29.537q12.024-12.174 29.477-12.174h605.26q17.453 0 29.477 11.964 12.024 11.963 12.024 29.326t-12.024 29.537q-12.024 12.174-29.477 12.174H177.37Zm0-186.218q-17.453 0-29.477-11.963-12.024-11.964-12.024-29.326 0-17.363 12.024-29.537T177.37-521.5h605.26q17.453 0 29.477 11.963 12.024 11.964 12.024 29.326 0 17.363-12.024 29.537T782.63-438.5H177.37Zm0-186.217q-17.453 0-29.477-11.964-12.024-11.963-12.024-29.326t12.024-29.537q12.024-12.174 29.477-12.174h605.26q17.453 0 29.477 11.964 12.024 11.963 12.024 29.326t-12.024 29.537q-12.024 12.174-29.477 12.174H177.37Z"/></svg>
    </div>
  </nav>
</navbar>
<div id="nav-dropdown" class="hidden">
  <div id="dropdown-link-list">
    
      <a class="nav-dropdown-link" href="/">首页</a>
    
      <a class="nav-dropdown-link" href="/archives">文章</a>
    
      <a class="nav-dropdown-link" href="/about">关于</a>
    
    
      <a class="nav-dropdown-link" href="/atom.xml" title="RSS 订阅">RSS</a>
     
    </div>
</div>
<script>
  let dropdownBtn = document.getElementById("nav-menu-btn");
  let dropdownEle = document.getElementById("nav-dropdown");
  dropdownBtn.onclick = function() {
    dropdownEle.classList.toggle("hidden");
  }
</script>
    </div>
    <div id="sidebar-wrapper">
      <sidebar id="sidebar">
  
    <div class="widget-wrap">
  <div class="info-card">
    <div class="avatar">
      
      <div class="img-dim"></div>
    </div>
    <div class="info">
      <div class="username">youlxb2008 </div>
      <div class="dot"></div>
      <div class="subtitle"> </div>
      <div class="link-list">
        
          <a class="link-btn" target="_blank" rel="noopener" href="https://github.com/youlxb2008" title="GitHub"><i class="fa-brands fa-github"></i></a>
         
      </div>  
    </div>
  </div>
</div>

  
  <div class="sticky">
    
      


  <div class="widget-wrap">
    <div class="widget">
      <h3 class="widget-title">分类</h3>
      <div class="category-box">
            <a class="category-link" href="/categories/%E5%89%8D%E7%AB%AF/">
                前端
                <div class="category-count">2</div>
            </a>
        
            <a class="category-link" href="/categories/%E7%B3%BB%E7%BB%9F/">
                系统
                <div class="category-count">1</div>
            </a>
        </div>
    </div>
  </div>


    
      
  <div class="widget-wrap">
    <div class="widget">
      <h3 class="widget-title">标签</h3>
      <ul class="widget-tag-list" itemprop="keywords"><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/tags/docker/" rel="tag">docker</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/tags/vue/" rel="tag">vue</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/tags/%E5%85%B6%E4%BB%96/" rel="tag">其他</a></li><li class="widget-tag-list-item"><a class="widget-tag-list-link" href="/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li></ul>
    </div>
  </div>


    
      
  <div class="widget-wrap">
    <div class="widget">
      <h3 class="widget-title">归档</h3>
      
      
        <a class="archive-link" href="/archives/2023/12 ">
          十二月 2023 
          <div class="archive-count">1 </div>
        </a>
      
        <a class="archive-link" href="/archives/2023/09 ">
          九月 2023 
          <div class="archive-count">2 </div>
        </a>
      
    </div>
  </div>


    
      
  <div class="widget-wrap">
    <div class="widget">
      <h3 class="widget-title">最新文章</h3>
      <ul>
        
          <a class="recent-link" href="/2023/12/15/other/get-back-pic/" title="windows获取当前桌面背景图" >
            <div class="recent-link-text">
              windows获取当前桌面背景图
            </div>
          </a>
        
          <a class="recent-link" href="/2023/09/14/front/eslintAndPrettier/" title="vue eslint和prettier集成" >
            <div class="recent-link-text">
              vue eslint和prettier集成
            </div>
          </a>
        
          <a class="recent-link" href="/2023/09/11/front/vue-docker-template/" title="vue的Docker默认模板" >
            <div class="recent-link-text">
              vue的Docker默认模板
            </div>
          </a>
        
      </ul>
    </div>
  </div>

    
  </div>
</sidebar>
    </div>
    <div id="content-body">
       


<article id="post-front/eslintAndPrettier" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  
    
   
  <div class="article-inner">
    <div class="article-main">
      <header class="article-header">
        
<div class="main-title-bar">
  <div class="main-title-dot"></div>
  
    
      <h1 class="p-name article-title" itemprop="headline name">
        vue eslint和prettier集成
      </h1>
    
  
</div>

        <div class='meta-info-bar'>
          <div class="meta-info">
  <time class="dt-published" datetime="2023-09-14T02:42:13.000Z" itemprop="datePublished">2023-09-14</time>
</div>
          <div class="need-seperator meta-info">
            <div class="meta-cate-flex">
  
  <a class="meta-cate-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
   
</div>
  
          </div>
          <div class="wordcount need-seperator meta-info">
            3.9k 词 
          </div>
        </div>
        
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/" rel="tag">vue</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a></li></ul>

      </header>
      <div class="e-content article-entry" itemprop="articleBody">
        
          <h1 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h1><p>这几天公司前端项目需要做静态代码扫描，去做了一下研究。vue 端主要还是通过 eslint 来实现静态代码扫描，在 vscode 端用 prettier 来做代码保存自动格式化的一个过程。</p>
<p>eslint: 用于扫描代码，提示一些代码质量上存在的通用性问题。<br>prettier：用于代码格式化，保证多 pc 端多软件之间的代码格式规范化工具。</p>
<h1 id="项目集成-eslint"><a href="#项目集成-eslint" class="headerlink" title="项目集成 eslint"></a>项目集成 eslint</h1><p>参考地址为： <a target="_blank" rel="noopener" href="https://eslint.nodejs.cn/docs/latest/use/getting-started">https://eslint.nodejs.cn/docs/latest/use/getting-started</a><br>当前版本： v8.50</p>
<p>在项目根目录下，命令行输入如下命令，可以进入交互式的 init 过程</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init @eslint/config</span><br></pre></td></tr></table></figure>

<p>初始化完成后，根目录下会出现一个.eslintrc.{js,yml,json}文件， 这里建议为 js，可以写注释。</p>
<p>配置文件参考如下：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">env</span>: &#123;</span><br><span class="line">    <span class="attr">browser</span>: <span class="literal">true</span>, <span class="comment">//浏览器环境使用</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">extends</span>: [</span><br><span class="line">    <span class="comment">//&#x27;standard&#x27;, // 继承标准规则</span></span><br><span class="line">    <span class="string">&quot;plugin:vue/vue3-recommended&quot;</span>, <span class="comment">// vue3项目标准</span></span><br><span class="line">    <span class="string">&quot;prettier&quot;</span>, <span class="comment">// 这个是prettier兼容，后面的规则会顶掉前面的，自定义的rules会覆盖掉这里的</span></span><br><span class="line">  ],</span><br><span class="line">  <span class="attr">parser</span>: <span class="string">&quot;vue-eslint-parser&quot;</span>,</span><br><span class="line">  <span class="attr">parserOptions</span>: &#123;</span><br><span class="line">    <span class="attr">ecmaVersion</span>: <span class="number">2021</span>, <span class="comment">// es6 2021标准</span></span><br><span class="line">    <span class="attr">sourceType</span>: <span class="string">&quot;module&quot;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">globals</span>: &#123;</span><br><span class="line">    <span class="comment">//允许出现的全局变量</span></span><br><span class="line">    <span class="attr">window</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="title class_">Component</span>: <span class="literal">true</span>, <span class="comment">// 注册组件</span></span><br><span class="line">    <span class="title class_">Behavior</span>: <span class="literal">true</span>, <span class="comment">// 注册行为</span></span><br><span class="line">    <span class="attr">requirePlugin</span>: <span class="literal">true</span>, <span class="comment">// 引入插件</span></span><br><span class="line">    <span class="attr">postMessage</span>: <span class="literal">true</span>, <span class="comment">// 向 Worker 线程发送消息</span></span><br><span class="line">    <span class="attr">onmessage</span>: <span class="literal">true</span>, <span class="comment">// 监听 Worker 线程的消息</span></span><br><span class="line">    <span class="attr">self</span>: <span class="literal">true</span>, <span class="comment">// Worker 线程全局对象</span></span><br><span class="line">    <span class="attr">importScripts</span>: <span class="literal">true</span>, <span class="comment">// 引入第三方库</span></span><br><span class="line">    <span class="attr">onerror</span>: <span class="literal">true</span>, <span class="comment">// 监听错误</span></span><br><span class="line">    <span class="attr">onmessageerror</span>: <span class="literal">true</span>, <span class="comment">// 监听 Worker 线程消息错误</span></span><br><span class="line">    <span class="attr">close</span>: <span class="literal">true</span>, <span class="comment">// 关闭 Worker 线程</span></span><br><span class="line">    <span class="attr">open</span>: <span class="literal">true</span>, <span class="comment">// 创建 Worker 线程</span></span><br><span class="line">    <span class="title class_">XMLHttpRequest</span>: <span class="literal">true</span>, <span class="comment">// ajax</span></span><br><span class="line">    <span class="title class_">FormData</span>: <span class="literal">true</span>, <span class="comment">// ajax</span></span><br><span class="line">    <span class="title class_">FileReader</span>: <span class="literal">true</span>, <span class="comment">// ajax</span></span><br><span class="line">    <span class="attr">setInterval</span>: <span class="literal">true</span>, <span class="comment">// 定时器</span></span><br><span class="line">    <span class="attr">setTimeout</span>: <span class="literal">true</span>, <span class="comment">// 定时器</span></span><br><span class="line">    <span class="attr">clearInterval</span>: <span class="literal">true</span>, <span class="comment">// 定时器</span></span><br><span class="line">    <span class="attr">clearTimeout</span>: <span class="literal">true</span>, <span class="comment">// 定时器</span></span><br><span class="line">    <span class="title class_">Image</span>: <span class="literal">true</span>, <span class="comment">// 图片</span></span><br><span class="line">    <span class="title class_">Audio</span>: <span class="literal">true</span>, <span class="comment">// 音频</span></span><br><span class="line">    <span class="title class_">WebSocket</span>: <span class="literal">true</span>, <span class="comment">// WebSocket</span></span><br><span class="line">    <span class="title class_">IntersectionObserver</span>: <span class="literal">true</span>, <span class="comment">// 监听节点是否进入屏幕可视区域</span></span><br><span class="line">    <span class="title class_">Promise</span>: <span class="literal">true</span>, <span class="comment">// Promise</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">rules</span>: &#123;</span><br><span class="line">    <span class="comment">//自定义规范，具体参考 https://zh-hans.eslint.org/docs/latest/use/configure/rules</span></span><br><span class="line">    <span class="attr">indent</span>: [<span class="string">&quot;error&quot;</span>, <span class="number">2</span>],</span><br><span class="line">    <span class="attr">eqeqeq</span>: <span class="string">&quot;warn&quot;</span>,</span><br><span class="line">    <span class="string">&quot;no-debugger&quot;</span>: <span class="string">&quot;error&quot;</span>,</span><br><span class="line">    <span class="string">&quot;no-tabs&quot;</span>: <span class="string">&quot;off&quot;</span>,</span><br><span class="line">    <span class="string">&quot;space-before-function-paren&quot;</span>: <span class="string">&quot;off&quot;</span>,</span><br><span class="line">    <span class="string">&quot;object-curly-spacing&quot;</span>: <span class="string">&quot;off&quot;</span>,</span><br><span class="line">    <span class="string">&quot;no-mixed-spaces-and-tabs&quot;</span>: <span class="string">&quot;off&quot;</span>,</span><br><span class="line">    <span class="string">&quot;no-useless-concat&quot;</span>: <span class="string">&quot;off&quot;</span>,</span><br><span class="line">    <span class="string">&quot;no-void&quot;</span>: <span class="string">&quot;off&quot;</span>,</span><br><span class="line">    <span class="string">&quot;no-new&quot;</span>: <span class="string">&quot;off&quot;</span>,</span><br><span class="line">    <span class="string">&quot;no-new-func&quot;</span>: <span class="string">&quot;off&quot;</span>,</span><br><span class="line">    <span class="string">&quot;accessor-pairs&quot;</span>: <span class="string">&quot;off&quot;</span>,</span><br><span class="line">    <span class="string">&quot;spaced-comment&quot;</span>: <span class="string">&quot;off&quot;</span>,</span><br><span class="line">    <span class="attr">camelcase</span>: <span class="string">&quot;warn&quot;</span>,</span><br><span class="line">    <span class="string">&quot;no-useless-escape&quot;</span>: <span class="string">&quot;warn&quot;</span>,</span><br><span class="line">    <span class="string">&quot;new-cap&quot;</span>: <span class="string">&quot;warn&quot;</span>,</span><br><span class="line">    <span class="string">&quot;no-useless-call&quot;</span>: <span class="string">&quot;warn&quot;</span>,</span><br><span class="line">    <span class="string">&quot;no-unused-expressions&quot;</span>: <span class="string">&quot;warn&quot;</span>,</span><br><span class="line">    <span class="string">&quot;no-new-wrappers&quot;</span>: <span class="string">&quot;warn&quot;</span>,</span><br><span class="line">    <span class="string">&quot;no-array-constructor&quot;</span>: <span class="string">&quot;warn&quot;</span>,</span><br><span class="line">    <span class="string">&quot;no-plusplus&quot;</span>: <span class="string">&quot;off&quot;</span>,</span><br><span class="line">    <span class="string">&quot;no-nested-ternary&quot;</span>: <span class="string">&quot;off&quot;</span>,</span><br><span class="line">    <span class="string">&quot;semi-spacing&quot;</span>: <span class="string">&quot;off&quot;</span>,</span><br><span class="line">    <span class="attr">semi</span>: <span class="string">&quot;off&quot;</span>,</span><br><span class="line">    <span class="string">&quot;vue/multi-word-component-names&quot;</span>: <span class="string">&quot;off&quot;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>然后再 package.json 文件中，如果没有，可以添加如下命令：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;scripts&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;lint&quot;</span><span class="punctuation">:</span> <span class="string">&quot;eslint --ext .js,.vue src&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;lint:fix&quot;</span><span class="punctuation">:</span> <span class="string">&quot;eslint --ext .js,.vue src --fix&quot;</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure>

<p>这时，你可以用 yarn lint:fix 来对全局代码做一个修复</p>
<h1 id="项目集成-prettier"><a href="#项目集成-prettier" class="headerlink" title="项目集成 prettier"></a>项目集成 prettier</h1><p>prettier 的中文官网是： <a target="_blank" rel="noopener" href="https://www.prettier.cn/">https://www.prettier.cn/</a><br>prettier 的集成其实也差不多</p>
<p>命令如下， 注 exact 为精确版本安装</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add --dev --exact prettier</span><br></pre></td></tr></table></figure>

<p>添加后需要手动在工程下添加.prettierrc{.js,.json}文件，这里依然是建议用 js</p>
<p>.prettierrc.js</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = &#123;</span><br><span class="line">  <span class="attr">printWidth</span>: <span class="number">160</span>, <span class="comment">//单行长度</span></span><br><span class="line">  <span class="attr">tabWidth</span>: <span class="number">2</span>, <span class="comment">//缩进长度</span></span><br><span class="line">  <span class="attr">useTabs</span>: <span class="literal">false</span>, <span class="comment">//使用空格代替tab缩进</span></span><br><span class="line">  <span class="attr">semi</span>: <span class="literal">false</span>, <span class="comment">//句末使用分号</span></span><br><span class="line">  <span class="attr">singleQuote</span>: <span class="literal">true</span>, <span class="comment">//使用单引号</span></span><br><span class="line">  <span class="attr">quoteProps</span>: <span class="string">&quot;as-needed&quot;</span>, <span class="comment">//仅在必需时为对象的key添加引号</span></span><br><span class="line">  <span class="attr">jsxSingleQuote</span>: <span class="literal">true</span>, <span class="comment">// jsx中使用单引号</span></span><br><span class="line">  <span class="attr">trailingComma</span>: <span class="string">&quot;none&quot;</span>, <span class="comment">//多行时尽可能打印尾随逗号</span></span><br><span class="line">  <span class="attr">bracketSpacing</span>: <span class="literal">true</span>, <span class="comment">//在对象前后添加空格-eg: &#123; foo: bar &#125;</span></span><br><span class="line">  <span class="attr">jsxBracketSameLine</span>: <span class="literal">true</span>, <span class="comment">//多属性html标签的‘&gt;’折行放置</span></span><br><span class="line">  <span class="attr">arrowParens</span>: <span class="string">&quot;always&quot;</span>, <span class="comment">//单参数箭头函数参数周围使用圆括号-eg: (x) =&gt; x</span></span><br><span class="line">  <span class="attr">requirePragma</span>: <span class="literal">false</span>, <span class="comment">//无需顶部注释即可格式化</span></span><br><span class="line">  <span class="attr">insertPragma</span>: <span class="literal">false</span>, <span class="comment">//在已被preitter格式化的文件顶部加上标注</span></span><br><span class="line">  <span class="attr">proseWrap</span>: <span class="string">&quot;preserve&quot;</span>, <span class="comment">//不知道怎么翻译</span></span><br><span class="line">  <span class="attr">htmlWhitespaceSensitivity</span>: <span class="string">&quot;ignore&quot;</span>, <span class="comment">//对HTML全局空白不敏感</span></span><br><span class="line">  <span class="attr">vueIndentScriptAndStyle</span>: <span class="literal">false</span>, <span class="comment">//不对vue中的script及style标签缩进</span></span><br><span class="line">  <span class="attr">endOfLine</span>: <span class="string">&quot;lf&quot;</span>, <span class="comment">//结束行形式</span></span><br><span class="line">  <span class="attr">embeddedLanguageFormatting</span>: <span class="string">&quot;auto&quot;</span>, <span class="comment">//对引用代码进行格式化</span></span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>prettier 的配置文件比较简单，可以去 <a target="_blank" rel="noopener" href="https://www.prettier.cn/playground/">https://www.prettier.cn/playground/</a> 试一试效果</p>
<p>然后在 package.json 添加如下</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;scripts&quot;</span><span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;prettier:all&quot;</span><span class="punctuation">:</span> <span class="string">&quot;prettier --write .&quot;</span><span class="punctuation">,</span></span><br><span class="line">  <span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br></pre></td></tr></table></figure>

<h1 id="vscode-集成-eslint-和-prettier"><a href="#vscode-集成-eslint-和-prettier" class="headerlink" title="vscode 集成 eslint 和 prettier"></a>vscode 集成 eslint 和 prettier</h1><p>需要添加如下两个插件<br><img src="/images/front/eslint-plugin0925.png" alt="图片" title="eslint"><br><img src="/images/front/prettier-plugin0925.png" alt="图片" title="prettier"></p>
<p>vscode 添加保存格式化<br><img src="/images/front/vscode%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BF%9D%E5%AD%98%E9%85%8D%E7%BD%AE.png" alt="图片" title="vscode格式化保存"></p>

        
      </div>

         
    </div>
    
     
  </div>
  
    
<nav id="article-nav">
  <a class="article-nav-btn left "
    
      href="/2023/12/15/other/get-back-pic/"
      title="windows获取当前桌面背景图"
     >
    <i class="fa-solid fa-angle-left"></i>
    <p class="title-text">
      
        windows获取当前桌面背景图
        
    </p>
  </a>
  <a class="article-nav-btn right "
    
      href="/2023/09/11/front/vue-docker-template/"
      title="vue的Docker默认模板"
     >

    <p class="title-text">
      
        vue的Docker默认模板
        
    </p>
    <i class="fa-solid fa-angle-right"></i>
  </a>
</nav>


  
</article>





    </div>
    <div id="footer-wrapper">
      <footer id="footer">
  
  <div id="footer-info" class="inner">
    
    &copy; 2024 youlxb2008<br>
    Powered by <a href="https://hexo.io/" target="_blank">Hexo</a> & Theme <a target="_blank" rel="noopener" href="https://github.com/saicaca/hexo-theme-vivia">Vivia</a>
  </div>
</footer>

    </div>
    <div class="back-to-top-wrapper">
    <button id="back-to-top-btn" class="back-to-top-btn hide" onclick="topFunction()">
        <i class="fa-solid fa-angle-up"></i>
    </button>
</div>

<script>
    function topFunction() {
        window.scroll({ top: 0, behavior: 'smooth' });
    }
    let btn = document.getElementById('back-to-top-btn');
    function scrollFunction() {
        if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
            btn.classList.remove('hide')
        } else {
            btn.classList.add('hide')
        }
    }
    window.onscroll = function() {
        scrollFunction();
    }
</script>

  </div>
  <script src="/js/light-dark-switch.js"></script>
</body>
</html>
